<template>
  <div class="chhealth flex">
    <div class="chhealth-personal">
      <div class="personal-main" v-if="result">
        <div class="left-img">
          <img :src="result.headmage" alt="" />
          </div>
        <div class="mian-name">
          <p style="font-size: 16px; font-weight: 500">
            {{ result.studentName }}
          </p>
          <div class="main-text">
            <p style="display:flex">
              性别：
              <span>
                <dict-tag :options="dict.type.sys_user_sex" :value="result.sex"/>
              </span>
            </p>
            <p>
              年龄：<span>{{ result.age }}</span>
            </p>
            <p v-if="result.birthday">
              出生日期：<span>{{ dealTime(result.birthday) }}</span>
            </p>
            <p v-if="result.studydate">
              入园日期：<span>{{ dealTime(result.studydate) }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="chhealth-student-list">
      <p>体检记录</p>
      <div class="list-main">
        <div class="mian-item" v-for="(item,index) in physicalList" :key="index" @click="goToDetail(item)">
          <div class="item-img">
            <img src="@/assets/image/physical.png" alt="">
          </div>
          <p v-if='item.physicalDate'>{{dealTime(item.physicalDate)}}</p>
        </div>
        <div class="mian-add">
          <span><i class="el-icon-plus" @click="gotoAddList(result)"></i></span>
        </div>
      </div>
    </div>
    <div class="chhealth-student-list">
      <p>月报</p>
      <div v-if="monthlyList.length" class="list-main">
        <div class="mian-item" v-for="(item,index) in monthlyList" :key="index" @click="goToMonthlyDetail(item)">
          <div class="item-img">
            <img src="@/assets/image/monthly-img.png" alt="">
          </div>
          <p>{{item.year}}年{{item.month}}月</p>
        </div>
      </div>
      <div v-else>暂无月报</div>
    </div>
  </div>
</template>
<script>
import { jylistStudent } from "@/api/base/student";
import { selectClazz } from "@/api/base/clazz";
import {
  getStudentArchivesInfo,
  getReportByStuList
} from "@/api/mindSystem/studentfile";
export default {
  name: "gzt",
  dicts: ["sys_user_sex"],
  data() {
    return {
      result: null,
      middle: null,
      queryParams: {
        classId: null,
        specId: null,
        year: null,
        name: null,
      },
      isClassDisabled: true, //班级disabled
      physicalList:[],
      monthlyList:[]
    };
  },
  created() {
    this.getStudentDetail(this.$route.query.classId)
    this.getReportByStuList(this.$route.query.classId)
    // this.result = this.$route.query.result.data.top;
    // this.middle= this.$route.query.result.data.middle;
    // // 转换生日日期格式
    // const birthdayDate = new Date(this.result.birthday);
    // const formattedBirthday = `${birthdayDate.getFullYear()}年${
    //   birthdayDate.getMonth() + 1
    // }月${birthdayDate.getDate()}日`;

    // // 转换入学日期格式
    // const studyDate = new Date(this.result.studydate);
    // const formattedStudyDate = `${studyDate.getFullYear()}年${
    //   studyDate.getMonth() + 1
    // }月${studyDate.getDate()}日`;

    // // 将结果存储回数据对象
    // this.result.birthday = formattedBirthday;
    // this.result.studydate = formattedStudyDate;
    // console.log("Result in Component B:", this.result,birthdayDate);
  },
  methods: {
    dealTime(originalDateStr){
      // 使用split方法将日期字符串拆分为年、月、日
      var dateParts = originalDateStr.split('-');

      // 获取年、月、日
      var year = dateParts[0];
      var month = dateParts[1];
      var day = dateParts[2];

      // 构造年月日分割形式的字符串
      return year + "年" + month + "月" + day + "日";
    },
    gotoAddList() {
      this.$router.push({
        path: "/mindSystem/healthchlist",
        query: {
          // classId: item.id,
          result: this.result, // 传递result数据
          status:1//1.新增2.查看详情
        },
      });
    },
    // 查看体检记录
    goToDetail(item){//1.新增2.查看详情
        this.$router.push({
          path: "/mindSystem/healthchlist",
          query: {
            result: item, // 传递result数据
            status:2//1.新增2.查看详情
          },
        });
    },
    //查看月报详情
    goToMonthlyDetail(item){
      // const heightcurMonth = item.heightWeightInfo.height.curMonth
      // const heightlastMonth = item.heightWeightInfo.height.lastMonth
      // const weightcurMonth = item.heightWeightInfo.weight.curMonth
      // const weightlastMonth = item.heightWeightInfo.weight.lastMonth


      // item.heightWeightInfo.height.curMonth = heightcurMonth ? heightcurMonth.toFixed(1) : ''
      // item.heightWeightInfo.height.lastMonth = heightlastMonth ? heightlastMonth.toFixed(1) : ''
      // item.heightWeightInfo.weight.curMonth = weightcurMonth ? weightcurMonth.toFixed(1) : ''
      // item.heightWeightInfo.weight.lastMonth = weightlastMonth ? weightlastMonth.toFixed(1) : ''
      this.$router.push({
          path: "/mindSystem/monthlydetail",
          query: {
            result: item, // 传递result数据
          },
        });
    },
    async getStudentDetail(id){
      try {
        const res = await getStudentArchivesInfo({id:id});
        this.result = res.data.top
        this.physicalList = res.data.middle
      } catch (error) {
        console.error("Error fetching student archives info:", error);
      }
    },
    // 获取月报列表
    async getReportByStuList(id){
      try {
        let params = {
          stuId:id,
          year:'',
          month:'',
        }
        const res = await getReportByStuList(params);
        this.monthlyList = res.data
      } catch (error) {
        console.error("Error fetching student archives info:", error);
      }
    },
    /**班级*/
    async getqueryFormclassList() {
      this.isClassDisabled = true;
      this.queryParams.classId = null;
      try {
        let params = {};
        if (this.queryParams.year) params.year = this.queryParams.year;
        const { rows } = await selectClazz(params);
        if (rows.length && this.queryParams.year) {
          this.isClassDisabled = false;
        }
        this.classList = rows.map((item) => {
          return {
            id: item.id,
            label: item.title,
          };
        });
      } catch (e) {
        console.log(e);
      }
    },
    /**班级*/
    async getFormclassList() {
      try {
        let params = {};
        if (this.form.year) params.year = this.form.year;
        const { rows } = await selectClazz(params);
        this.classList = rows.map((item) => {
          return {
            id: item.id,
            label: item.title,
          };
        });
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.chhealth {
  background-color: rgba(242, 243, 245, 1);
  box-sizing: border-box;
  .chhealth-personal {
    margin: 30px;
    padding: 20px;
    background-color: #fff;
    .personal-main {
      display: flex;
      align-items: center;
      .left-img {
        width: 70px;
        height: 70px;
        // background-color: green;
        border-radius: 50%;
        margin-right: 17px;
        overflow: hidden; /* 用于裁剪溢出的图像部分 */
      }

      .left-img img {
        width: 100%; /* 让 el-image 宽度填充父容器 */
        height: 100%; /* 让 el-image 高度填充父容器 */
        object-fit: cover; /* 图像填充容器，保持纵横比 */
      }
      .mian-name {
        display: flex;
        flex-direction: column;
        .main-text {
          display: flex;
          p {
            margin-right: 30px;
            font-size: 14px;
            font-weight: 400;
            color: #999999;
            span {
              font-weight: 500;
              color: #333333;
            }
          }
        }
      }
    }
  }
  .chhealth-student-list {
    margin: 0 30px 20px 30px;
    background-color: #fff;
    padding: 20px;
    .list-main {
      display: flex;
      flex-wrap: wrap;
      .mian-item {
        margin-right: 10px;
        .item-img {
        }
        p{
          text-align: center;
          color: #333333;
          font-size: 14px;
          margin-top: 0;
        }
      }
      .mian-add {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 150px;
        height: 150px;
        border-radius: 4px;
        border: 1px solid #b2bdc9;
        span {
          position: absolute;
          font-size: 50px;
          color: #b2bdc9;
          cursor: pointer;
        }
      }
    }
  }
}
.flex {
  display: flex;
  flex-direction: column;
}
</style>
